<template>
  <el-card style="width: 100%; height: 20%">
    <el-row :gutter="20" width="100%" align="middle">
      <el-col :span="2">
        <el-avatar :src="imgUrl" :size="80" />
      </el-col>
      <el-col :span="22" style="line-height: 30px">
        <h1 style="font-weight: 600; font-size: 20px">
          {{ getTime() + '好' + userName }}
        </h1>
        <el-text
          style="
            transform: skewX(-20deg);
            transform-origin: 0 0;
            font-style: italic;
          "
          tag="sub"
          size="small"
        >
          Brioni管理平台
        </el-text>
      </el-col>
    </el-row>
  </el-card>

  <div class="homeBottom">
    <svg-icon name="welcome" width="500px" height="400px"></svg-icon>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user.ts'
import { onMounted, ref } from 'vue'
import { getTime } from '@/utils/publicFun.ts'

let userStore = useUserStore()
const imgUrl = ref() //头像
const userName = ref()

onMounted(() => {
  getUserInfo()
})

const getUserInfo = () => {
  imgUrl.value = userStore.avatar
  userName.value = userStore.userName
}
</script>

<style scoped>
.homeBottom {
  margin-top: 20px;
  width: 100%;
  height: calc(100% - 20% - 20px);
  text-align: center;
  display: flex;
  justify-content: center;
}
</style>
